<template>
  <page-wrap>
    <div class="open-container">
      <van-form input-align="right" class="container-main-form">
        <van-cell-group inset :border="false">
          <van-field
            v-model="username"
            name="姓名"
            label="姓名"
            placeholder="请输入会员姓名"
            @update:model-value="formCheck"
          />

          <van-field
            v-model="phone"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号码"
            type="number"
            readonly
          />
          <van-field name="radio" label="性别">
            <template #input>
              <van-radio-group
                v-model="gender"
                direction="horizontal"
                style="display: flex"
                shape="dot"
                @change="onChange"
              >
                <van-radio name="先生" style="margin-right: 16px"
                  >先生</van-radio
                >
                <van-radio name="女士">女士</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="birthday"
            is-link
            readonly
            name="ask"
            label="生日"
            placeholder="请选择"
            @click="showBirthday = true"
          />
        </van-cell-group>
      </van-form>
      <z-button bold @click="onSubmit" top="20" :disabled="isAllValuesPresent"
        >保存</z-button
      >
    </div>
  </page-wrap>
  <z-popup
    :show="showBirthday"
    position="bottom"
    style="border-radius: 24px 24px 0px 0px"
    class="popup"
    @close="confirmOn"
  >
    <van-date-picker
      v-model="currentDate"
      :columns-type="columnsType"
      @cancel="onCancel"
      @confirm="onConfirm"
      title="生日"
    />
  </z-popup>
</template>

<script setup>
import dayjs from 'dayjs'
import Api from '@/api'
import { showToast } from 'vant';
import { validateMobile,validateName } from '@/lib/util.js'

const route = useRoute()
const router = useRouter()

const username = ref('')
const phone = ref('')
const gender = ref('')
let genderCode = ref()
// 生日
const birthday = ref('')
const showBirthday = ref(false)
const currentDate = ref(['01', '01'])
const columnsType = ['month', 'day']
//表单
let postForm = reactive({
  username: '',
  phone: '',
  gender: '',
  birthday: ''
})
//------------------------------------------------------弹窗按钮------------------------------------------------------------
const onConfirm = () => {
  birthday.value = dayjs(currentDate.value).format('MM-DD')
  showBirthday.value = false
  // 按钮权限判断
  if (birthday.value !== postForm.birthday) {
    isAllValuesPresent.value = false
  } else {
    isAllValuesPresent.value = true
  }
}
const onCancel = () => {
  showBirthday.value = false
}
// 点击蒙版取消
const confirmOn = ()=>{
  showBirthday.value = false
}
//------------------------------------------------------按钮是否可用------------------------------------------------------------
// 表单输入事件
const formCheck = () => {
  if (username.value !== postForm.username) {
    isAllValuesPresent.value = false
  } else {
    isAllValuesPresent.value = true
  }
}
// 单选
const onChange = value => {
  if (value !== postForm.gender) {
    isAllValuesPresent.value = false
  } else {
    isAllValuesPresent.value = true
  }
}
//------------------------------------------------------根据id获取信息------------------------------------------------------------
const Code = route.params.memberId // 获取传过来的id
console.log(Code);
const Init = () => {
  const GetMemberInfo = Api.Common.AppObjProcess.Do({
    functionName: 'GetMemberInfoOne',
    contentData: { code: Code }
  })
    .then(res => {
      console.log(res);
      username.value = res.result[0].name
      phone.value = res.result[0].mobile
      genderCode.value = res.result[0].sex
      if (res.result[0].sex === '011002') {
        gender.value = '女士'
      } else {
        gender.value = '先生'
      }
      if(res.result[0].birthday) {
        birthday.value = dayjs(res.result[0].birthday).format('MM-DD')
      } else {
        birthday.value =  ''
      }
      postForm = {
        username: res.result[0].name,
        phone: res.result[0].mobile,
        gender: gender.value,
        birthday: res.result[0].birthday
      }
    })
  
}
Init()

//---------------------------------------------------------底部按钮----------------------------------------------------------------
const isAllValuesPresent = ref(true)

const subflag = ref(false)
const onSubmit = e => {
  if (gender.value === '女士') {
    genderCode.value = '011002'
  } else {
    genderCode.value = '011001'
  }
  if (!validateMobile(phone.value)) return
  if (!validateName(username.value)) return
  if(subflag.value) {
      return
  }
  subflag.value = true
  const openCard = Api.Common.AppObjProcess.Do({
    functionName: 'UpdateMember',
    contentData: {
      code: Code,
      mobile: phone.value,
      name: username.value,
      sex: genderCode.value,
      birthday: birthday.value
    }
  })
    .then(res => {
      showToast('修改成功')
      subflag.value = false
      router.push({
        path: `/onmember/onmemberdetails`,
        query:{memberId:postForm.phone}
      })
    }).catch(err=>{
        subflag.value = false
    })
    
}
</script>

<style scoped lang="scss">
@import '@/styles/l.scss';
.open-container {
  padding: 10px 12px 0 12px;
}

:deep(.van-picker__toolbar) {
  background-color: #45454d;
}
::v-deep(.van-picker__columns) {
  background-color: #45454d;
}
::v-deep(.van-picker-column) {
  background-color: #45454d;
}
:deep(.van-picker-column__item) {
  color: #ffffff;
}
:deep(.van-picker-column__item--selected) {
  color: #ffaa00;
}
:deep(.van-picker__mask) {
  background: transparent;
}
:deep(.van-hairline-unset--top-bottom) {
  &:after {
    border-color: #505059;
  }
}
:deep(.van-picker__confirm) {
  font-size: 16px;
  color: #ffaa00;
  padding: 0 30px;
}
:deep(.van-picker__cancel) {
  font-size: 16px;
  color: #999999;
  padding: 0 30px;
}
:deep(.van-picker__title) {
  font-size: 18px;
  color: #ffffff;
}
:deep(.van-picker) {
  background-color: transparent;
}
:deep(.van-tabs__nav) {
  background-color: transparent;
}
:deep(.van-tab) {
  color: #cccccc;
  &.van-tab--active {
    color: #ffaa00;
  }
}
:deep(.van-tabs__line) {
  background-color: #ffaa00;
}
:deep(.van-picker__toolbar) {
  border-bottom: 1px solid #505059;
}
:deep(.van-picker-group__tab-title) {
  margin-right: 0;
}
</style>
